<template>
  <div>
    <div v-if="dataList.length" class="table_scroll_wrapper">
      <stock-list
        :list="dataList"
        stockTag="heavy"
        unit="rem"
        fixed="left"
        :expand="false"
        :fixedHead="true"
        :offsetTop="offsetTop"
        @headSort="onSortClick"
        @clickRow="onRowClick"
      >
        <!-- 股票名称 -->
        <stock-list-item
          prop="stock_code"
          label="股票名称"
          label-width="1.7rem"
          label-align="left"
        >
          <tempalte v-slot="scope">
            <div class="stock_detail_template">
              <div v-if="scope.stock_name" class="stock-td" v-hxm-fontResize="{minSize:6}">{{ scope.stock_name }}</div>
              <div v-else>--</div>
              <div>{{ scope.stock_code }}</div>
            </div>
          </tempalte>
        </stock-list-item>
        <stock-list-item
          prop="nowPrice"
          label="现价"
          sortable="true"
          label-width="1.4rem"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table_in_template">
              <div v-if="scope.upDownPercent > 0" class="up_data">
                {{ scope.nowPrice }}
              </div>
              <div v-else-if="scope.nowPrice && Number(scope.nowPrice) === 0" class="zero_data">
                {{ scope.nowPrice }}
              </div>
              <div v-else-if="['', undefined, -9999].includes(scope.nowPrice)">--</div>
              <div v-else class="down_data">
                {{ scope.nowPrice }}
              </div>
            </div>
          </tempalte>
        </stock-list-item>
        <stock-list-item
          prop="upDownPercent"
          label="涨幅"
          label-width="1.4rem"
          sortable="false"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table_in_template">
              <div v-if="scope.upDownPercent > 0" class="up_data">{{ scope.upDownPercent }}%</div>
              <div
                v-else-if="scope.upDownPercent && Number(scope.upDownPercent) === 0"
                class="zero_data"
              >
                {{ scope.upDownPercent }}%
              </div>
              <div v-else-if="!scope.upDownPercent || scope.upDownPercent === -9999">--</div>
              <div v-else class="down_data">{{ scope.upDownPercent }}%</div>
            </div>
          </tempalte>
        </stock-list-item>
        <!-- 最高涨幅 -->
        <stock-list-item
          prop="highest_profit"
          label="最高涨幅"
          sortable="true"
          label-width="1.6rem"
          label-align="right"
        >
          <tempalte v-slot="scope">
            <div class="table_in_template">
              <div :class="getColorClass(scope.highest_profit)">{{ formatPercent(scope.highest_profit) }}</div>
            </div>
          </tempalte>
        </stock-list-item>
        <template v-if="isJuniorPool">
          <!-- 入池时间 -->
          <stock-list-item
            prop="add_date"
            label="入池时间"
            sortable="true"
            label-width="2.2rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.add_date">
                  {{ scope.add_date.split(' ')[0] }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- 所属行业 -->
          <stock-list-item
            prop="industry"
            label="所属行业"
            label-width="2.4rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.industry">
                  {{ scope.industry }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- K线表现 -->
          <stock-list-item
            prop="klinebx"
            label="K线表现"
            sortable="true"
            label-width="2.4rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template" :style="{color: getStrategyColor(scope.klinebx)}">{{ formatText(scope.klinebx) }}</div>
            </tempalte>
          </stock-list-item>
          <!-- 趋势雷达 -->
          <stock-list-item
            prop="qsld"
            label="趋势雷达"
            sortable="true"
            label-width="2.4rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template" :style="{color: getStrategyColor(scope.qsld)}">{{ formatText(scope.qsld) }}</div>
            </tempalte>
          </stock-list-item>
          <!-- 主力雷达 -->
          <stock-list-item
            prop="zlld"
            label="主力雷达"
            sortable="true"
            label-width="2.4rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template" :style="{color: getStrategyColor(scope.zlld)}">{{ formatText(scope.zlld) }}</div>
            </tempalte>
          </stock-list-item>
          <!-- 超级机构 -->
          <stock-list-item
            prop="cjjg"
            label="超级机构"
            sortable="true"
            label-width="2.4rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template" :style="{color: getStrategyColor(scope.cjjg)}">{{ formatText(scope.cjjg) }}</div>
            </tempalte>
          </stock-list-item>
          <!-- AI机构活跃度 -->
          <stock-list-item
            prop="AIhyd"
            label="AI机构活跃度"
            sortable="true"
            label-width="2.4rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template" :style="{color: getStrategyColor(scope.AIhyd)}">{{ formatText(scope.AIhyd) }}</div>
            </tempalte>
          </stock-list-item>
        </template>
        <template v-else>
          <!-- 区间涨幅 -->
          <stock-list-item
            prop="range_profit"
            label="区间涨幅"
            sortable="true"
            label-width="1.8rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div :class="getColorClass(scope.range_profit)">{{ formatPercent(scope.range_profit) }}</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- 入池时间 -->
          <stock-list-item
            prop="add_date"
            label="入池时间"
            sortable="true"
            label-width="2.2rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.add_date">
                  {{ scope.add_date.split(' ')[0] }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- 所属行业 -->
          <stock-list-item
            prop="industry"
            label="所属行业"
            label-width="2.4rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.industry">
                  {{ scope.industry }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- 买入时间 -->
          <stock-list-item
            prop="buy_date"
            label="买入时间"
            sortable="true"
            label-width="2.2rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.buy_date">
                  {{ scope.buy_date.split(' ')[0] }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- 买入价格 -->
          <stock-list-item
            prop="buy_price"
            label="买入价格"
            sortable="true"
            label-width="1.8rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.buy_price">
                  {{ scope.buy_price.toFixed(2) }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- 卖出时间 -->
          <stock-list-item
            prop="sell_date"
            label="卖出时间"
            sortable="true"
            label-width="2.2rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="scope.sell_date">
                  {{ scope.sell_date.split(' ')[0] }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- 卖出价格 -->
          <stock-list-item
            prop="sell_price"
            label="卖出价格"
            sortable="true"
            label-width="1.8rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div v-if="typeof scope.sell_price === 'number'">
                  {{ scope.sell_price.toFixed(2) }}
                </div>
                <div v-else>--</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- 状态 -->
          <stock-list-item
            prop="status"
            label="状态"
            label-width="2.2rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div>{{ getStatus(scope.status) }}</div>
              </div>
            </tempalte>
          </stock-list-item>
          <!-- 建议仓位 -->
          <stock-list-item
            prop="position"
            label="建议仓位"
            sortable="true"
            label-width="2.2rem"
            label-align="right"
          >
            <tempalte v-slot="scope">
              <div class="table_in_template">
                <div>{{ formatPercent(scope.position, 2, true) }}</div>
              </div>
            </tempalte>
          </stock-list-item>
        </template>
      </stock-list>
    </div>
    <div v-else>
      <empty-pool minHeight="58vw"></empty-pool>
    </div>
  </div>
</template>

<script>
import { STOCK_STATUS } from '@/config/pool';
import { jumpTokline, formatText, formatPercent, getColorClass } from '@/utils';
import { sortCustom, sortNumber, sortDateStr } from '@/utils/tool';
import strategies from '@/components/detail/strategies';
import EmptyPool from '@/components/detail/EmptyPool.vue';

export default {
  data() {
    return {
      dataList: [],
      originList: [],
    };
  },
  props: {
    offsetTop: {
      type: String,
      default: '0px'
    },
    isJuniorPool: {
      default: true,
      type: Boolean,
    },
    detailTableData: {
      default: () => [],
      type: Array,
    },
  },
  components: {
    EmptyPool,
  },
  watch: {
    detailTableData: {
      handler(val) {
        this.dataList = JSON.parse(JSON.stringify(val));
        this.originList = JSON.parse(JSON.stringify(val));
      },
      immediate: true,
    }
  },
  methods: {
    formatText,
    formatPercent,
    getColorClass,

    getStatus(status) {
      return STOCK_STATUS[status] || '--';
    },

    /**
     * 获取策略的颜色
     */
    getStrategyColor(strategyName) {
      const strategy = strategies.find(item => item.strategyName === strategyName);
      return strategy ? strategy.displayColor : '#989898';
    },
    // 根据子组件中传来的值，对所有数据排序
    onSortClick(arg) {
      const customSortTypes = ['klinebx', 'qsld', 'zlld', 'cjjg', 'AIhyd'];
      const dateSortTypes = ['add_date', 'buy_date'];
      const noSortTypes = ['stock_code', 'industry', 'status'];
      if (noSortTypes.includes(arg.sortKey)) {
        return;
      }
      const SORT_TYPE = {
        default: 0,
        // 升序
        asc: 1,
        // 降序
        desc: 2,
      };
      if (customSortTypes.includes(arg.sortKey)) {
        this.dataList.sort(sortCustom(arg.sortKey));
      } else {
        dateSortTypes.includes(arg.sortKey)
          ? this.dataList.sort(sortDateStr(arg.sortKey))
          : this.dataList.sort(sortNumber(arg.sortKey));
      }

      // 根据排序标签调整排序方向
      if (arg.currentSortTag === SORT_TYPE.desc) {
        this.dataList.reverse();
      } else if (arg.currentSortTag === SORT_TYPE.default) {
        this.dataList = JSON.parse(JSON.stringify(this.originList));
      } else {
        //
      }

    },

    /**
     * k线跳转
     */
    onRowClick(row) {
      jumpTokline(row.stock_code, row.market);
    },
  },
};
</script>

<style lang="less" scoped>
.stock_detail_template, .table_in_template {
  color: var(--text-1);
}

.stock-td {
  width: 1.5rem;
  overflow: hidden;
  white-space: nowrap;
}
</style>
